<template>
  <mescroll-uni
    ref="mescrollRef"
    :down="downOption"
    :up="upOption"
    height="100%"
    @down="downCallback"
    @emptyclick="emptyClick"
    @init="mescrollInit"
    @up="upCallback"
  >
    <!-- 数据列表 -->
    <good-list :list="goods" :signetId="deviceid"></good-list>
  </mescroll-uni>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js'
import goodList from './goodList.vue'

export default {
  mixins: [MescrollMixin, MescrollMoreItemMixin],
  computed: { ...mapGetters(['userInfo', 'api']) },
  components: {
    goodList
  },
  data() {
    return {
      downOption: {
        auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
      },
      upOption: {
        auto: false, // 不自动加载
        noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
        empty: {
          tip: `~ ${this.$t('暂无记录')} ~`, // 提示
          fixed: true,
          top: '200rpx'
        },
        textNoMore: `~ ${this.$t('触底了')} ~`
      },
      goods: [], //列表数据
      deviceid: ''
    }
  },
  onLoad(e) {
    uni.setNavigationBarTitle({title: this.$t('wifi列表')})
    this.deviceid = e.deviceid
    //刷新
    uni.$on('applicationDetailsToApplicationList', () => {
      this.mescroll.triggerDownScroll()
    })
  },
  methods: {
    /*下拉刷新的回调 */
    downCallback() {
      this.goods = []
      // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
      // loadSwiper();
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll()
    },
    /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    upCallback(page) {
      //联网加载数据
      this.get_wifi_list(page)
    },
    //用印记录
    get_wifi_list(page) {
      let req = {
        signetId: this.deviceid
      }
      //章的接口
      this.$u
        .post(this.api.GLOBAL_signet_getWifiList, req)
        .then((res) => {
          if (page.num === 1) {
            this.goods = []
          }
          if (res.code === 200 && res.data) {
            this.mescroll.endBySize(res.data.length, res.data.length)
            this.goods = this.goods.concat(res.data)
            //过滤数据
            this.filterData(this.goods)
          } else {
            this.mescroll.endBySize(0, 0)
            this.goods = []
          }
        })
        .catch((err) => {
          //联网失败, 结束加载
          this.mescroll.endErr()
        })
    },
    //过滤数据
    filterData(list) {
      this.goods = list.filter((item) => {
        if (item !== '') {
          return item
        }
      })
    },
    //点击空布局按钮的回调
    emptyClick() {}
  }
}
</script>
